import React, { useState, useEffect, useCallback } from "react";
import { useNavigate } from "react-router-dom";
import { SearchBar, NavBar, Grid, Image, Button, Ellipsis, Footer, Checkbox } from "antd-mobile";
import { AddOutline } from "antd-mobile-icons";
import request, { baseUrl } from "@/utils/request";
import "./Bookbox.scss";
import { connect } from "react-redux";

function BookBox(props) {
    const { user } = props;
    const post = user[0].books;

    const [keyword, setKeyword] = useState("仙魔变");
    const [datalist, setDatalist] = useState([]);
    const [newbj, setNewbj] = useState("编辑");
    const navigate = useNavigate();
    const back = () => {
        navigate(-1);
    };
    const addBook = () => {
        navigate("/shop");
    };
    const getData = async () => {
        const { data } = await request.post("/books/bookbox", {
            data: {
                ids: post,
            },
        });
        setDatalist(data.data);
    };

    if (newbj === "编辑") {
        var isChange = false;
    } else {
        var isChange = true;
    }

    const btnChange = () => {
        isChange = !isChange;
        isChange ? setNewbj("完成") : setNewbj("编辑");
        var del = document.getElementsByClassName("delete");
        for (var i = 0; i < del.length; i++) {
            isChange ? (del[i].style.display = "inline") : (del[i].style.display = "none");
        }
        var bg = document.getElementsByClassName("bg-black");
        for (var i = 0; i < bg.length; i++) {
            isChange ? (bg[i].style.background = "rgba(0,0,0,0.3)") : (bg[i].style.background = "white");
        }
        var btns = document.getElementsByClassName("btn");
        for (var i = 0; i < btns.length; i++) {
            isChange ? (btns[i].style.display = "block") : (btns[i].style.display = "none");
        }
    };
    useEffect(() => {
        getData();
    }, []);

    const gotoSearch = useCallback(() => {
        navigate("/search?keyword=" + keyword);
    }, []);

    const gotoDetail = useCallback((id) => {
        navigate("/detail?id=" + id);
    }, []);

    return (
        <div>
            <NavBar
                onBack={back}
                style={{
                    position: "fixed",
                    top: 0,
                    left: 0,
                    width: "100%",
                    padding: 0,
                    backgroundColor: "#fff",
                    zIndex: 2,
                }}
                right={
                    <div>
                        <span className="delete">删除</span>
                        <span className="bj" onClick={btnChange}>
                            {newbj}
                        </span>
                    </div>
                }
            >
                个人书架
            </NavBar>
            <SearchBar
                placeholder={keyword}
                showCancelButton
                style={{
                    // margin: "32px 0 15px",
                    position: "fixed",
                    top: "45px",
                    left: 0,
                    width: "100%",
                    padding: 0,
                    backgroundColor: "#fff",
                    zIndex: 2,
                }}
                onFocus={gotoSearch}
            />
            <Grid columns={3} gap={15} style={{ marginTop: "80px" }}>
                {datalist.map((item) => (
                    <Grid.Item
                        key={item.id}
                        style={{ position: "relative", zIndex: 1 }}
                        // style={{ display: "flex", flexDirection: "column", justifyContent: "center" }}
                    >
                        <div className="bg-black">
                            <div style={{ background: "white" }}>
                                <Image
                                    src={item.pic}
                                    style={{ width: "100%", height: "100%" }}
                                    onClick={gotoDetail.bind(null, item.id)}
                                />
                                <Checkbox
                                    className="btn"
                                    key={item.id}
                                    style={{ "--icon-size": "25px", position: "absolute", top: 0, right: 0 }}
                                />
                                <Ellipsis
                                    direction="end"
                                    content={item.book}
                                    style={{ fontWeight: "bold", fontSize: 10 }}
                                />
                            </div>
                        </div>
                    </Grid.Item>
                ))}
                <Grid.Item>
                    <Button color="primary" fill="outline" style={{ width: "100%", height: "90%" }} onClick={addBook}>
                        <AddOutline fontSize={30} />
                    </Button>
                </Grid.Item>
                <Grid.Item>
                    <Image
                        src="http://www.mianfeixiaoshuoyueduwang.com/upload/thumbnail/book_1000_1999/book_1106.jpg"
                        style={{ width: "100%", height: "100%", opacity: 0 }}
                    />
                    <Ellipsis
                        direction="end"
                        content={"123"}
                        style={{ fontWeight: "bold", fontSize: 10, opacity: 0 }}
                    />
                </Grid.Item>
            </Grid>
            {/* 尾部 */}
            <Footer label="没有更多了" content="Copyright © 2022 趣学藏书阁"></Footer>
        </div>
    );
}

const mapStateToProps = function (state) {
    console.log("state.userInfo", state.userInfo);
    return {
        user: state.userInfo,
    };
};

// 把修改redux的方法映射到props
const mapDispatchToProps = function (dispatch) {
    return {
        logout() {
            dispatch({ type: "logout" });
        },
    };
};
BookBox = connect(mapStateToProps, mapDispatchToProps)(BookBox);
export default BookBox;
